<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<header>
    <nav class="navbar">
        <a href="#home">个人简历</a>
        <a href="#about">我的技能</a>
        <a href="#portfolio">座右铭</a>
        <a href="#contact">来加入英雄协会吧</a>
    </nav>
</header>
<section class="home" id="home">
    <div class="content">
        <span class="hi">你好</span>
        <p class="text"> 欢迎来到我的主页！</p>
        <a href="#about" class="btn">about me</a>
    </div>

    <div class="image">
        <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.6nwlcZrzQY-duXJr40n9HgHaEK?w=312&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="假的">
    </div>
</section>
<section class="about" id="about">
<h1 class="heading"> 关于我 </h1>
<div class="row-1">
    <div class="image">
        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.2TVVwz3mlkTrBOvS7bpyxAAAAA?w=221&h=186&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="假的">
    </div>
    <div class="content">
        <h3> 我叫张鑫哲</h3>
        <p>是一名兴趣使然的英雄</p>
        <div class="box-container">
            <div class="box">
                <p> <span> 年龄 : </span> 19 </p>
                <p> <span> 性别 : </span> 男 </p>
                <p> <span> 学校 : </span> 顺德职业技术学院 </p>
                <p> <span> 学院 : </span> 智能制造学院 </p>
            </div>
            <div class="box">
                <p> <span> 专业 : </span> 英语</p>
                <p> <span> 电话 : </span> 13620615177 </p>
                <p> <span> QQ : </span> 878159183 </p>
                <p> <span> 教育水平 : </span> 大学 </p>
            </div>
        </div>
    </div>
</div>
<h1 class="heading"> 我的技能 </h1>
<div class="row-2">
    <div class="skills">
        <div class="progress">
            <h3> HTML <span> 90% </span> </h3>
            <div class="bar"> <span></span> </div>
        </div>
        <div class="progress">
            <h3> CSS <span> 80% </span> </h3>
            <div class="bar"> <span></span> </div>
        </div>
    </div>
    <div class="box-container">
        <div class="box">
            <h3>认真</h3>
        </div>
        <div class="box">
            <h3>有团队意识</h3>
        </div>
        <div class="box">
            <h3>有创意</h3>
        </div>
        <div class="box">
            <h3>执着</h3>
        </div>
    </div>
</div>
</section>
<section class="portfolio" id="portfolio">
    <h1 class="heading">座右铭</h1>
    <div class="box-container">
        <div class="box">
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.NcsDqHf8kFwhbPEfQETODQHaEK?w=291&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片">       
            <div id="az" class="box">我变秃了，也变强了</div>
        </div>
    </div>
</section>
<section class="contact" id="contact">
    <h1 class="heading">来加入英雄协会吧</h1>
    <div class="row">
        <form action="">
            <input type="text" placeholder="姓名" class="box">
            <input type="email" placeholder="邮件" class="box">
            <input type="number" placeholder="电话" class="box">
            <textarea name="" placeholder="内容" id="" cols="30" rows="10"></textarea>
            <input type="submit" class="btn" value="发送">
        </form>
    </div>
</section>
</body>
</html>